﻿<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>index</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script type="text/javascript" src="js/china.js"></script>
	<script type="text/javascript" src="js/map.js"></script>
	<script type="text/javascript" src="js/js.js"></script>
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<div class="head clearfix">
		<h1 class="pulll_left">智微生物后台数据可视操作化</h1>
		<div class="menu menu2 pulll_left">
			<ul>

				<li><a href="templates/Monday.html">周一数据报告</a></li>
				<li><a href="templates/Thusday.html">周二数据报告</a></li>
				<li><a href="templates/Wedesday.html">周三数据报告</a></li>
				<li><a href="templates/Thursday.html">周四数据报告</a></li>
				<li><a href="templates/Friday.html">周五数据报告</a></li>
				<li><a href="templates/Monday.html">周六数据报告</a></li>
				<li><a href="templates/Monday.html">周日数据报告</a></li>
				<li><a href="templates/Monday.html">总数据详情</a></li>

			</ul>
		</div>
		<div class="time" id="showTime">2018/6/12 17:00:12</div>

	</div>
	<div class="mainbox">

		<!-- 添加的警报 -->
		<div class="alert-overlay" id="alertDetailContainer">
        <div class="alert-modal">
            <div class="alert-header">
                <h3>⚠️ 菌落检测警报详情</h3>
                <span class="alert-close" onclick="closeAlertDetail()">&times;</span>
            </div>
            <div class="alert-body" id="alertDetailContent"></div>
            <div class="alert-footer">
                <button class="alert-button" onclick="closeAlertDetail()">确认</button>
            </div>
        </div>
    </div>


		<ul class="clearfix nav1">
			<li style="width: 22%">
				<div class="box">
					<div class="tit">昨日产品检测样品中含有各个菌落平均数量(cfu/g)</div>
					<div class="boxnav" style="height: 330px;">
						<div class="circular-layout">
							<div class="center-item">
								<div class="yq" id="yq">20</div>
								<span>大肠杆菌</span>
							</div>
							<div class="circular-item" style="--angle: 0deg">
								<div class="yq">78</div>
								<span>金黄色葡萄球菌</span>
							</div>
							<div class="circular-item" style="--angle: 51.4deg">
								<div class="yq">40</div>
								<span>表皮芽杆菌</span>
							</div>
							<div class="circular-item" style="--angle: 102.8deg">
								<div class="yq">30</div>
								<span>沙门氏菌</span>
							</div>
							<div class="circular-item" style="--angle: 154.2deg">
								<div class="yq">30</div>
								<span>克罗诺干菌</span>
							</div>
							<div class="circular-item" style="--angle: 205.7deg">
								<div class="yq">30</div>
								<span>李斯特菌</span>
							</div>
							<div class="circular-item" style="--angle: 257.1deg">
								<div class="yq">30</div>
								<span>志贺氏菌</span>
							</div>
						</div>
					</div>
				</div>
				<div class="box">
					<div class="tit">国家标准下的各种菌落分布数量(cfu/g)</div>
					<div class="boxnav">
						<div class="" style="height: 406px" id="echart2"></div>
					</div>
				</div>
			</li>
			<li style="width: 56%">

				<div class="box">
					<div class="boxnav mapc" style="height: 550px; position: relative">
						<div class="map" id="map"></div>
					</div>
				</div>
				<div class="box">
					<div class="tit">七日各菌落数量增长(cfu/g)以及过量警报线</div>
					<div class="boxnav" style="height: 250px;" id="echart3">


					</div>
				</div>
			</li>
			<li style="width: 22%">
				<div class="box">
					<div class="tit">需要重新检测的菌落</div>
					<div class="boxnav" id="echart4" style="height: 200px;">

					</div>
				</div>
				<div class="box">
					<div class="tit">样品中菌落分布占比</div>
					<div class="boxnav" style="height: 250px;" id="echart5">



					</div>
				</div>
				<div class="box">
					<div class="tit">每月超过警戒线的次数</div>
					<div class="boxnav" style="height: 250px;" id="echart6">
					</div>
				</div>
			</li>
		</ul>



		<script>
			var t = null;
			t = setTimeout(time, 1000);//開始运行
			function time() {
				clearTimeout(t);//清除定时器
				dt = new Date();
				var y = dt.getFullYear();
				var mt = dt.getMonth() + 1;
				var day = dt.getDate();
				var h = dt.getHours();//获取时
				var m = dt.getMinutes();//获取分
				var s = dt.getSeconds();//获取秒
				document.getElementById("showTime").innerHTML = y + "/" + mt + "/" + day + " " + h + ":" + m + ":" + s + "";
				t = setTimeout(time, 1000); //设定定时器，循环运行     
			}

		</script>
	</div>
</body>

</html>